<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>二维动画制作</title>
    <!--主要是在二维平面上（x轴和y轴）实现图片的动作转换transfprm（使转变，使变形）属性：重点是学习图像的自动移动，平移，旋转，缩放，以及倾斜。-->
    <style>
body>div{
    width:400px;
    height:400px;
    background-color: slategray;
    

}
body>div>#dier{
    width:300px;
    height:300px;
    background-color:aqua;
    transform: translate(50px,50px);
    /*translate里面的两个数值一个代表的是x轴一个代表的是y轴，想单一的移动x或者y可以直接设定translatex或者translatey值，平移的参考点是中心点*/
}
body>div>div>div{
    width:200px;
    height:200px;
background-color: rosybrown;
transform: rotate(0deg);
/*rotate这个属性是设置旋转角度，默认是自身的中心点*/
transform-origin: 50% 50%;
/*origin这个属性是设置旋转中心点，默认是顺时针旋转，默认的旋转中心点50% 50%，代表x,y轴。*/
}
#xuanzhuan{
    width:100px;
    height:100px;
    background-color: pink;
    transform: scale(1);
    /*scale缩放属性，括号里的值是缩放倍数，默认定义图形中心为缩放中心点当图形旋转的时候所在的坐标系也会跟着旋转*/
}
#qingxie{
     width:50px;
    height:50px;
    background-color:lawngreen;
    transform: skew(45deg,0deg);
}
#shiyan{
    width:500px;
    height:500px;
    background-color: pink;
}
#shiyan>#shiyan1{
    width:200px;
    height:200px;
    background-color:gray;
    /*transform：(translate(50px,50px)，rotate(0deg)，scale(1)，skew(5deg,6deg))可以这样写下面的也是一种*/
    /*transform: matrix()*/
    /*matrix矩阵*/
}
/*具有继承性,给相似位置的div一个确定的id，不简单的是定位到哪一个元素，最开始设定好id，那么相似位置接下来的元素就不需要再次设定*/

    </style>
</head>
<body>
    <div>
        <div id="dier">
            <div>
                <div id="xuanzhuan">
                    <div id="qingxie"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="shiyan">
        <div id="shiyan1"></div>
      <div id="shiyan2"></div>
    </div>
</body>
</html>